<template>
  <!-- 横向Tab -->
  <tab :list="tabList1" v-model:active="tab1" class="bg-[#e6f0ff] py-2 pb-0 mb-1 shadow box-border w-full" direction="horizontal" label="title">
    <template #tab="{ tab, idx, active }">
      <view class="flex-center border-b-4 border-b-solid px-6 py-2 rounded-t-xl" :class="active ? 'border-[#165DFF] bg-white shadow text-[#165DFF] font-bold' : 'border-transparent text-gray-500'">
        <text class="text-[28rpx] whitespace-nowrap">{{ tab.name }}</text>
      </view>
    </template>
  </tab>

  <view class="flex bg-white shadow-md overflow-hidden w-full">
    <!-- 纵向Tab -->
    <tab class="w-[200rpx] h-[60vh] bg-[#f5f5f5] mr-1 shadow" :list="tabList2" v-model:active="tab2" direction="vertical" label="name">
      <template #tab="{ tab, idx, active }">
        <view
          class="flex items-center border-l-4 border-l-solid px-4 py-2 whitespace-nowrap"
          :class="active ? 'border-green-500 bg-white text-green-500 font-bold' : 'border-transparent text-gray-500'"
        >
          <text class="text-[28rpx] truncate w-full">{{ tab.name }}的方式方法是师傅</text>
        </view>
      </template>
    </tab>

    <!-- 内容区 -->
    <view class="flex-1 h-[60vh]  overflow-hidden overflow-y-auto bg-white box-border">
      <tab :list="tabList3" v-model:active="tab3" class="bg-[#f6f6f6] shadow box-border w-full" direction="horizontal" label="name">
        <template #tab="{ tab, idx, active }">
          <view class="flex-center border-b-4 border-b-solid px-6 py-2" :class="active ? 'border-b-red-500 shadow text-red-500 font-bold' : 'border-b-transparent text-gray-500'">
            <text class="text-[28rpx] whitespace-nowrap">{{ tab.name }}</text>
          </view>
        </template>
      </tab>

      <view class="p-4 flex flex-wrap gap-x-4 gap-y-2">
        <nut-button type="primary" class="rounded-xl px-6 py-2 shadow-sm" v-for="item in tabList4" :key="item.id">
          {{ item.name }}
        </nut-button>
      </view>
      
    </view>
  </view>
</template>

<script setup>
import { ref, watch } from "vue";
import { IconFont } from "@nutui/icons-vue-taro";
import tab from "./tab.vue";

const value = ref(2);
const value2 = ref(2);
const list = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
// import { Cell } from "plugin://materialPlugin/cell";
const url = ref("https://www.baidu.com");

const tabList1 = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => ({ id: item, name: `根 ${item}` })));
const tabList2 = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => ({ id: item, name: `父 ${item}` })));
const tabList3 = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => ({ id: item, name: `子 ${item}` })));
const tabList4 = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => ({ id: item, name: `孙 ${item}` })));
const tab1 = ref(0);
const tab2 = ref(0);
const tab3 = ref(0);
const tab4 = ref(0);

const tabList = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => ({ id: item, title: `根 ${item}` })));
const active = ref(0);

const startmessage = (e) => {
  // startmessage
};

const completemessage = (e) => {
  // completemessage
};

const onJoin = () => {
  // onJoin
  // wx.invoke('joinMember', {
  //   memberId: '1234567890',
  //   success: (res) => {
  //     res
  //   },
  //   fail: (err) => {
  //     err
  //   }
  // })
  const JSAPI_TICKET = "sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg ";

  ww.register({
    corpId: "ww7ca4776b2a70000",
    jsApiList: ["selectExternalContact"],
    getConfigSignature() {
      // getConfigSignature
      return ww.getSignature(JSAPI_TICKET);
    },
  });

  // 调用 register 后可以立刻调用其他 JS 接口
  ww.selectExternalContact({
    success(res) {
      // selectExternalContact
      alert(JSON.stringify(res));
    },
  });
};

// 级联联动：tab1变化时，tab2、tab3、tab4依次自动选中各自列表第一项
watch(tab1, (newVal) => {
  // tab1
  if (tabList2.value.length > 0) {
    tab2.value = 0;
  }
  if (tabList3.value.length > 0) {
    tab3.value = 0;
  }
  if (tabList4.value.length > 0) {
    tab4.value = 0;
  }
});

watch(tab2, (newVal) => {
  if (tabList3.value.length > 0) {
    tab3.value = 0;
  }
  if (tabList4.value.length > 0) {
    tab4.value = 0;
  }
});

watch(tab3, (newVal) => {
  if (tabList4.value.length > 0) {
    tab4.value = 0;
  }
});
</script>
